<template>
  <div class="component-charts-page" :class="{ 'dark-mode': darkMode }">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">图表组件</h1>
          <p class="page-subtitle">基于 ECharts 的专业数据可视化组件，支持多种图表类型和实时数据更新</p>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button type="primary" @click="refreshAllCharts">
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
            <el-button @click="exportChartsConfig">
              <el-icon><Download /></el-icon>
              导出配置
            </el-button>
            <el-button @click="toggleAutoRefresh" :type="autoRefresh ? 'success' : 'info'">
              <el-icon><Timer /></el-icon>
              {{ autoRefresh ? '停止' : '开启' }}自动刷新
            </el-button>
          </el-button-group>
        </div>
      </div>
    </div>

    <!-- 组件导航 -->
    <div class="component-nav">
      <el-card class="nav-card" :class="darkMode ? 'shimmer-effect' : ''">
        <el-scrollbar>
          <div class="nav-items">
            <div
              v-for="(nav, index) in chartNavs"
              :key="nav.id"
              :class="[
                'nav-item', 
                { active: activeNav === nav.id },
                darkMode && index % 2 === 0 ? 'float-effect' : ''
              ]"
              @click="scrollToSection(nav.id)"
            >
              <el-icon><component :is="nav.icon" /></el-icon>
              <span>{{ nav.name }}</span>
            </div>
          </div>
        </el-scrollbar>
      </el-card>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-section">
      <!-- 基础图表 -->
      <div id="basic" class="chart-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">基础图表 Basic Charts</h2>
              <p class="section-desc">常用的基础统计图表类型</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">柱状图</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>销售数据统计</h4>
                      <el-button-group size="small">
                        <el-button @click="updateBarChart('month')">月度</el-button>
                        <el-button @click="updateBarChart('quarter')">季度</el-button>
                        <el-button @click="updateBarChart('year')">年度</el-button>
                      </el-button-group>
                    </div>
                    <div ref="barChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>多系列柱状图</h4>
                      <el-switch 
                        v-model="barStackMode" 
                        active-text="堆叠模式" 
                        inactive-text="并列模式"
                        @change="updateMultiBarChart"
                      />
                    </div>
                    <div ref="multiBarChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">折线图</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>趋势分析</h4>
                      <el-select v-model="lineChartType" @change="updateLineChart" size="small">
                        <el-option label="平滑曲线" value="smooth" />
                        <el-option label="折线" value="line" />
                        <el-option label="阶梯线" value="step" />
                      </el-select>
                    </div>
                    <div ref="lineChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>面积图</h4>
                      <el-button @click="toggleAreaFill" size="small">
                        {{ areaFilled ? '取消填充' : '填充区域' }}
                      </el-button>
                    </div>
                    <div ref="areaChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">饼图</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="8">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>市场份额</h4>
                      <el-button @click="togglePieAnimation" size="small">
                        {{ pieAnimated ? '关闭动画' : '开启动画' }}
                      </el-button>
                    </div>
                    <div ref="pieChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>环形图</h4>
                      <el-slider 
                        v-model="ringRadius" 
                        :min="20" 
                        :max="60" 
                        @change="updateRingChart"
                        size="small"
                      />
                    </div>
                    <div ref="ringChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>玫瑰图</h4>
                      <el-switch 
                        v-model="roseType" 
                        active-text="半径模式" 
                        inactive-text="面积模式"
                        @change="updateRoseChart"
                        size="small"
                      />
                    </div>
                    <div ref="roseChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 高级图表 -->
      <div id="advanced" class="chart-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">高级图表 Advanced Charts</h2>
              <p class="section-desc">复杂数据展示和交互式图表</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">散点图与气泡图</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>相关性分析</h4>
                      <el-button-group size="small">
                        <el-button @click="updateScatterData('correlation')">相关性</el-button>
                        <el-button @click="updateScatterData('regression')">回归分析</el-button>
                      </el-button-group>
                    </div>
                    <div ref="scatterChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>气泡图</h4>
                      <el-select v-model="bubbleCategory" @change="updateBubbleChart" size="small">
                        <el-option label="技术部门" value="tech" />
                        <el-option label="销售部门" value="sales" />
                        <el-option label="市场部门" value="marketing" />
                      </el-select>
                    </div>
                    <div ref="bubbleChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">热力图</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>用户活跃度热力图</h4>
                      <el-date-picker 
                        v-model="heatmapDateRange" 
                        type="daterange" 
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="updateHeatmapChart"
                        size="small"
                      />
                    </div>
                    <div ref="heatmapChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>地理热力图</h4>
                      <el-radio-group v-model="geoHeatmapType" @change="updateGeoHeatmap" size="small">
                        <el-radio-button label="sales">销售</el-radio-button>
                        <el-radio-button label="users">用户</el-radio-button>
                        <el-radio-button label="orders">订单</el-radio-button>
                      </el-radio-group>
                    </div>
                    <div ref="geoHeatmapChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">雷达图</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>能力评估雷达图</h4>
                      <el-select v-model="radarEmployee" @change="updateRadarChart" size="small">
                        <el-option 
                          v-for="emp in employees" 
                          :key="emp.id" 
                          :label="emp.name" 
                          :value="emp.id" 
                        />
                      </el-select>
                    </div>
                    <div ref="radarChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>多维对比雷达图</h4>
                      <el-checkbox-group v-model="radarCompareList" @change="updateCompareRadarChart">
                        <el-checkbox v-for="emp in employees" :key="emp.id" :label="emp.id">
                          {{ emp.name }}
                        </el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div ref="compareRadarChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 实时图表 -->
      <div id="realtime" class="chart-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">实时图表 Real-time Charts</h2>
              <p class="section-desc">动态数据更新和实时监控图表</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">实时监控</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>CPU 使用率</h4>
                      <div class="realtime-controls">
                        <el-button 
                          @click="toggleRealtimeData('cpu')" 
                          :type="realtimeCharts.cpu ? 'success' : 'info'"
                          size="small"
                        >
                          {{ realtimeCharts.cpu ? '停止' : '开始' }}
                        </el-button>
                        <span class="current-value">{{ currentCpuUsage }}%</span>
                      </div>
                    </div>
                    <div ref="cpuChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>内存使用情况</h4>
                      <div class="realtime-controls">
                        <el-button 
                          @click="toggleRealtimeData('memory')" 
                          :type="realtimeCharts.memory ? 'success' : 'info'"
                          size="small"
                        >
                          {{ realtimeCharts.memory ? '停止' : '开始' }}
                        </el-button>
                        <span class="current-value">{{ currentMemoryUsage }}%</span>
                      </div>
                    </div>
                    <div ref="memoryChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">动态仪表盘</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="8" v-for="gauge in gauges" :key="gauge.id">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>{{ gauge.title }}</h4>
                      <el-tag :type="getGaugeStatus(gauge.value)">
                        {{ gauge.value }}{{ gauge.unit }}
                      </el-tag>
                    </div>
                    <div :ref="el => setGaugeRef(el, gauge.id)" class="chart-wrapper gauge-chart"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">数据流图</h3>
            <div class="demo-content">
              <div class="chart-container large-chart">
                <div class="chart-header">
                  <h4>网络流量监控</h4>
                  <div class="flow-controls">
                    <el-switch 
                      v-model="networkFlowActive" 
                      active-text="实时监控" 
                      inactive-text="停止监控"
                      @change="toggleNetworkFlow"
                    />
                    <el-select v-model="flowTimeRange" @change="updateFlowTimeRange" size="small">
                      <el-option label="最近1小时" value="1h" />
                      <el-option label="最近6小时" value="6h" />
                      <el-option label="最近24小时" value="24h" />
                    </el-select>
                  </div>
                </div>
                <div ref="networkFlowChart" class="chart-wrapper large-chart-wrapper"></div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 交互图表 -->
      <div id="interactive" class="chart-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">交互图表 Interactive Charts</h2>
              <p class="section-desc">支持缩放、钻取、联动等交互功能</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">可缩放时间轴</h3>
            <div class="demo-content">
              <div class="chart-container large-chart">
                <div class="chart-header">
                  <h4>股票价格走势</h4>
                  <div class="zoom-controls">
                    <el-button-group size="small">
                      <el-button @click="zoomToRange('1d')">1天</el-button>
                      <el-button @click="zoomToRange('1w')">1周</el-button>
                      <el-button @click="zoomToRange('1m')">1月</el-button>
                      <el-button @click="zoomToRange('3m')">3月</el-button>
                      <el-button @click="zoomToRange('1y')">1年</el-button>
                    </el-button-group>
                    <el-button @click="resetZoom" size="small">重置</el-button>
                  </div>
                </div>
                <div ref="zoomChart" class="chart-wrapper large-chart-wrapper"></div>
              </div>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">钻取图表</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>区域销售钻取</h4>
                      <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="(level, index) in drilldownPath" :key="index">
                          <a @click="drillUp(index)">{{ level.name }}</a>
                        </el-breadcrumb-item>
                      </el-breadcrumb>
                    </div>
                    <div ref="drilldownChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-container">
                    <div class="chart-header">
                      <h4>图表联动</h4>
                      <p class="chart-desc">点击左侧图表查看详细信息</p>
                    </div>
                    <div ref="linkedChart" class="chart-wrapper"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">自定义工具栏</h3>
            <div class="demo-content">
              <div class="chart-container large-chart">
                <div class="chart-header">
                  <h4>数据分析工具</h4>
                  <div class="custom-toolbar">
                    <el-button-group size="small">
                      <el-button @click="addDataMarker">
                        <el-icon><Plus /></el-icon>
                        标记
                      </el-button>
                      <el-button @click="toggleDataBrush">
                        <el-icon><Crop /></el-icon>
                        刷选
                      </el-button>
                      <el-button @click="exportChartData">
                        <el-icon><Download /></el-icon>
                        导出
                      </el-button>
                      <el-button @click="resetChart">
                        <el-icon><Refresh /></el-icon>
                        重置
                      </el-button>
                    </el-button-group>
                  </div>
                </div>
                <div ref="customToolChart" class="chart-wrapper large-chart-wrapper"></div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { 
  Refresh, Download, Timer, Plus, Crop,
  TrendCharts, Histogram, PieChart, ScaleToOriginal
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const darkMode = ref(false)
const activeNav = ref('basic')
const autoRefresh = ref(false)
const barStackMode = ref(false)
const lineChartType = ref('smooth')
const areaFilled = ref(true)
const pieAnimated = ref(true)
const ringRadius = ref(40)
const roseType = ref(false)
const bubbleCategory = ref('tech')
const heatmapDateRange = ref([])
const geoHeatmapType = ref('sales')
const radarEmployee = ref(1)
const radarCompareList = ref([1, 2])
const realtimeCharts = ref({ cpu: false, memory: false })
const currentCpuUsage = ref(45)
const currentMemoryUsage = ref(62)
const networkFlowActive = ref(false)
const flowTimeRange = ref('1h')
const drilldownPath = ref([{ name: '全国', level: 0 }])

// 图表引用
const chartRefs = ref({})
const gaugeRefs = ref({})

// 图表实例
const chartInstances = ref({})

// 定时器
let autoRefreshTimer = null
let realtimeTimers = {}

// 组件导航数据
const chartNavs = ref([
  { id: 'basic', name: '基础图表', icon: 'Histogram' },
  { id: 'advanced', name: '高级图表', icon: 'TrendCharts' },
  { id: 'realtime', name: '实时图表', icon: 'Timer' },
  { id: 'interactive', name: '交互图表', icon: 'ScaleToOriginal' }
])

// 员工数据
const employees = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵六' }
])

// 仪表盘数据
const gauges = ref([
  { id: 'temperature', title: '温度', value: 25, unit: '°C', max: 50 },
  { id: 'humidity', title: '湿度', value: 65, unit: '%', max: 100 },
  { id: 'pressure', title: '气压', value: 1013, unit: 'hPa', max: 1100 }
])

// 方法
const scrollToSection = (id) => {
  activeNav.value = id
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const setGaugeRef = (el, id) => {
  if (el) {
    gaugeRefs.value[id] = el
  }
}

const refreshAllCharts = () => {
  Object.values(chartInstances.value).forEach(chart => {
    if (chart && typeof chart.resize === 'function') {
      chart.resize()
    }
  })
  ElMessage.success('所有图表已刷新')
}

const exportChartsConfig = () => {
  ElMessage.success('图表配置导出成功')
}

const toggleAutoRefresh = () => {
  autoRefresh.value = !autoRefresh.value
  if (autoRefresh.value) {
    autoRefreshTimer = setInterval(() => {
      refreshAllCharts()
    }, 5000)
    ElMessage.success('已开启自动刷新')
  } else {
    if (autoRefreshTimer) {
      clearInterval(autoRefreshTimer)
    }
    ElMessage.info('已停止自动刷新')
  }
}

// 获取仪表盘状态
const getGaugeStatus = (value) => {
  if (value < 30) return 'success'
  if (value < 70) return 'warning'
  return 'danger'
}

// 初始化基础柱状图
const initBarChart = () => {
  const chartDom = chartRefs.value.barChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: { type: 'value' },
    series: [{
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#667eea' },
          { offset: 1, color: '#764ba2' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4facfe' },
            { offset: 1, color: '#00f2fe' }
          ])
        }
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.barChart = myChart
}

// 初始化多系列柱状图
const initMultiBarChart = () => {
  const chartDom = chartRefs.value.multiBarChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    legend: { 
      data: ['产品A', '产品B', '产品C'],
      top: 10
    },
    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '产品A',
        type: 'bar',
        stack: barStackMode.value ? 'total' : '',
        data: [120, 132, 101, 134, 90, 230],
        itemStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#667eea' },
            { offset: 1, color: '#764ba2' }
          ])
        }
      },
      {
        name: '产品B',
        type: 'bar',
        stack: barStackMode.value ? 'total' : '',
        data: [220, 182, 191, 234, 290, 330],
        itemStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f093fb' },
            { offset: 1, color: '#f5576c' }
          ])
        }
      },
      {
        name: '产品C',
        type: 'bar',
        stack: barStackMode.value ? 'total' : '',
        data: [150, 232, 201, 154, 190, 330],
        itemStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4facfe' },
            { offset: 1, color: '#00f2fe' }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
  chartInstances.value.multiBarChart = myChart
}

// 初始化折线图
const initLineChart = () => {
  const chartDom = chartRefs.value.lineChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: { 
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#e0e6ed' } }
    },
    yAxis: { 
      type: 'value',
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
    },
    series: [{
      name: '访问量',
      type: 'line',
      smooth: lineChartType.value === 'smooth',
      step: lineChartType.value === 'step',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      lineStyle: {
        color: '#667eea',
        width: 3,
        shadowColor: 'rgba(102, 126, 234, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 5
      },
      itemStyle: { 
        color: '#667eea',
        borderColor: '#fff',
        borderWidth: 2
      },
      symbol: 'circle',
      symbolSize: 8,
      areaStyle: areaFilled.value ? {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(102, 126, 234, 0.4)' },
          { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
        ])
      } : null
    }]
  }
  myChart.setOption(option)
  chartInstances.value.lineChart = myChart
}

// 初始化饼图
const initPieChart = () => {
  const chartDom = chartRefs.value.pieChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 'center',
      data: ['Chrome', 'Firefox', 'Safari', 'Edge', 'Others'],
      textStyle: { fontSize: 12 }
    },
    series: [{
      name: '浏览器',
      type: 'pie',
      radius: ['20%', '70%'],
      center: ['60%', '50%'],
      roseType: false,
      data: [
        { value: 335, name: 'Chrome', itemStyle: { color: '#667eea' } },
        { value: 310, name: 'Firefox', itemStyle: { color: '#764ba2' } },
        { value: 234, name: 'Safari', itemStyle: { color: '#f093fb' } },
        { value: 135, name: 'Edge', itemStyle: { color: '#f5576c' } },
        { value: 148, name: 'Others', itemStyle: { color: '#4facfe' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: '{b}\n{d}%'
      },
      labelLine: {
        show: true
      },
      animationType: pieAnimated.value ? 'scale' : null,
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.pieChart = myChart
}

// 初始化面积图
const initAreaChart = () => {
  const chartDom = chartRefs.value.areaChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: { 
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#e0e6ed' } }
    },
    yAxis: { 
      type: 'value',
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
    },
    series: [
      {
        name: '收入',
        type: 'line',
        smooth: true,
        data: [8200, 9320, 9010, 9340, 12900, 13300],
        lineStyle: {
          color: '#667eea',
          width: 3
        },
        itemStyle: { 
          color: '#667eea',
          borderColor: '#fff',
          borderWidth: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(102, 126, 234, 0.6)' },
            { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
          ])
        }
      },
      {
        name: '支出',
        type: 'line',
        smooth: true,
        data: [5200, 6320, 5010, 6340, 8900, 9300],
        lineStyle: {
          color: '#f5576c',
          width: 3
        },
        itemStyle: { 
          color: '#f5576c',
          borderColor: '#fff',
          borderWidth: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(245, 87, 108, 0.6)' },
            { offset: 1, color: 'rgba(245, 87, 108, 0.1)' }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
  chartInstances.value.areaChart = myChart
}

// 初始化环形图
const initRingChart = () => {
  const chartDom = chartRefs.value.ringChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    legend: {
      bottom: 10,
      left: 'center',
      data: ['技术', '产品', '设计', '运营', '市场']
    },
    series: [{
      name: '部门人数',
      type: 'pie',
      radius: [ringRadius.value + '%', '70%'],
      center: ['50%', '45%'],
      data: [
        { value: 25, name: '技术', itemStyle: { color: '#667eea' } },
        { value: 15, name: '产品', itemStyle: { color: '#764ba2' } },
        { value: 8, name: '设计', itemStyle: { color: '#f093fb' } },
        { value: 12, name: '运营', itemStyle: { color: '#f5576c' } },
        { value: 10, name: '市场', itemStyle: { color: '#4facfe' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: '{b}\n{c}人'
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.ringChart = myChart
}

// 初始化玫瑰图
const initRoseChart = () => {
  const chartDom = chartRefs.value.roseChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    series: [{
      name: '销售占比',
      type: 'pie',
      radius: ['10%', '70%'],
      center: ['50%', '50%'],
      roseType: roseType.value ? 'radius' : 'area',
      data: [
        { value: 40, name: '华东区', itemStyle: { color: '#667eea' } },
        { value: 33, name: '华南区', itemStyle: { color: '#764ba2' } },
        { value: 28, name: '华北区', itemStyle: { color: '#f093fb' } },
        { value: 22, name: '西南区', itemStyle: { color: '#f5576c' } },
        { value: 18, name: '西北区', itemStyle: { color: '#4facfe' } },
        { value: 15, name: '东北区', itemStyle: { color: '#43e97b' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: '{b}\n{d}%'
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.roseChart = myChart
}

// 初始化散点图
const initScatterChart = () => {
  const chartDom = chartRefs.value.scatterChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const data = []
  for (let i = 0; i < 50; i++) {
    data.push([
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 40
    ])
  }
  
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' },
      formatter: function (params) {
        return `X: ${params.data[0].toFixed(2)}<br/>Y: ${params.data[1].toFixed(2)}`
      }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'value',
      scale: true,
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#e0e6ed' } },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
    },
    yAxis: {
      type: 'value',
      scale: true,
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#e0e6ed' } },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
    },
    series: [{
      name: '数据点',
      type: 'scatter',
      data: data,
      symbolSize: function (data) {
        return Math.sqrt(data[2]) * 2
      },
      itemStyle: {
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
          { offset: 0, color: 'rgba(102, 126, 234, 0.8)' },
          { offset: 1, color: 'rgba(102, 126, 234, 0.2)' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            { offset: 0, color: 'rgba(245, 87, 108, 0.8)' },
            { offset: 1, color: 'rgba(245, 87, 108, 0.2)' }
          ])
        }
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.scatterChart = myChart
}

// 初始化气泡图
const initBubbleChart = () => {
  const chartDom = chartRefs.value.bubbleChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' },
      formatter: function (params) {
        return `${params.seriesName}<br/>${params.name}<br/>经验: ${params.data[0]}年<br/>薪资: ${params.data[1]}k<br/>满意度: ${params.data[2]}`
      }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      name: '工作经验(年)',
      type: 'value',
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#e0e6ed' } },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
    },
    yAxis: {
      name: '薪资(k)',
      type: 'value',
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#e0e6ed' } },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
    },
    series: [{
      name: '员工数据',
      type: 'scatter',
      data: [
        [2, 8, 85, '张三'],
        [3, 12, 75, '李四'],
        [5, 18, 90, '王五'],
        [4, 15, 80, '赵六'],
        [7, 25, 95, '钱七'],
        [6, 22, 88, '孙八'],
        [8, 30, 92, '周九'],
        [1, 6, 70, '吴十']
      ],
      symbolSize: function (data) {
        return data[2] / 3
      },
      itemStyle: {
        color: function(params) {
          const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe']
          return colors[params.dataIndex % colors.length]
        },
        opacity: 0.8
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.bubbleChart = myChart
}

// 初始化热力图
const initHeatmapChart = () => {
  const chartDom = chartRefs.value.heatmapChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a',
    '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p']
  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
  
  const data = []
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 24; j++) {
      data.push([j, i, Math.floor(Math.random() * 100)])
    }
  }
  
  const option = {
    tooltip: {
      position: 'top',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' },
      formatter: function (params) {
        return `${days[params.data[1]]}<br/>${hours[params.data[0]]}: ${params.data[2]}`
      }
    },
    grid: { height: '50%', top: '10%' },
    xAxis: {
      type: 'category',
      data: hours,
      splitArea: { show: true }
    },
    yAxis: {
      type: 'category',
      data: days,
      splitArea: { show: true }
    },
    visualMap: {
      min: 0,
      max: 100,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%',
      inRange: {
        color: ['#667eea', '#764ba2', '#f093fb', '#f5576c']
      }
    },
    series: [{
      name: '活跃度',
      type: 'heatmap',
      data: data,
      label: { show: true },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.heatmapChart = myChart
}

// 初始化地理热力图
const initGeoHeatmapChart = () => {
  const chartDom = chartRefs.value.geoHeatmapChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const data = [
    {name: '北京', value: [116.46, 39.92, 340]},
    {name: '上海', value: [121.48, 31.22, 450]},
    {name: '深圳', value: [114.07, 22.62, 300]},
    {name: '广州', value: [113.23, 23.16, 280]},
    {name: '杭州', value: [120.19, 30.26, 220]},
    {name: '成都', value: [104.06, 30.67, 180]},
    {name: '重庆', value: [106.54, 29.59, 160]},
    {name: '武汉', value: [114.31, 30.52, 150]},
    {name: '西安', value: [108.95, 34.27, 140]},
    {name: '南京', value: [118.78, 32.04, 130]}
  ]
  
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' },
      formatter: function (params) {
        return `${params.name}<br/>数值: ${params.value ? params.value[2] : '暂无数据'}`
      }
    },
    visualMap: {
      min: 0,
      max: 500,
      calculable: true,
      inRange: {
        color: ['#667eea', '#764ba2', '#f093fb', '#f5576c']
      },
      textStyle: { color: '#000' }
    },
    series: [{
      name: '数据',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: data,
      symbolSize: function (val) {
        return val[2] / 10
      },
      label: {
        show: false
      },
      itemStyle: {
        color: '#667eea'
      },
      emphasis: {
        label: { show: true }
      }
    }],
    geo: {
      map: 'china',
      roam: false,
      itemStyle: {
        areaColor: '#f3f3f3',
        borderColor: '#999'
      },
      emphasis: {
        itemStyle: {
          areaColor: '#e6e6e6'
        }
      }
    }
  }
  myChart.setOption(option)
  chartInstances.value.geoHeatmapChart = myChart
}

// 初始化雷达图
const initRadarChart = () => {
  const chartDom = chartRefs.value.radarChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    radar: {
      indicator: [
        { name: '技术能力', max: 100 },
        { name: '沟通能力', max: 100 },
        { name: '项目管理', max: 100 },
        { name: '创新思维', max: 100 },
        { name: '团队协作', max: 100 },
        { name: '学习能力', max: 100 }
      ],
      shape: 'polygon',
      splitNumber: 5,
      axisName: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(102, 126, 234, 0.2)'
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(102, 126, 234, 0.5)'
        }
      }
    },
    series: [{
      name: '能力评估',
      type: 'radar',
      data: [
        {
          value: [85, 75, 80, 90, 88, 82],
          name: '张三',
          itemStyle: { color: '#667eea' },
          areaStyle: { color: 'rgba(102, 126, 234, 0.3)' }
        }
      ],
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 3
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.radarChart = myChart
}

// 初始化对比雷达图
const initCompareRadarChart = () => {
  const chartDom = chartRefs.value.compareRadarChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['张三', '李四'],
      bottom: 5
    },
    radar: {
      indicator: [
        { name: '技术能力', max: 100 },
        { name: '沟通能力', max: 100 },
        { name: '项目管理', max: 100 },
        { name: '创新思维', max: 100 },
        { name: '团队协作', max: 100 },
        { name: '学习能力', max: 100 }
      ],
      shape: 'polygon',
      splitNumber: 5
    },
    series: [{
      name: '能力对比',
      type: 'radar',
      data: [
        {
          value: [85, 75, 80, 90, 88, 82],
          name: '张三',
          itemStyle: { color: '#667eea' },
          areaStyle: { color: 'rgba(102, 126, 234, 0.2)' }
        },
        {
          value: [75, 85, 70, 85, 92, 78],
          name: '李四',
          itemStyle: { color: '#f5576c' },
          areaStyle: { color: 'rgba(245, 87, 108, 0.2)' }
        }
      ]
    }]
  }
  myChart.setOption(option)
  chartInstances.value.compareRadarChart = myChart
}

// 初始化CPU监控图
const initCpuChart = () => {
  const chartDom = chartRefs.value.cpuChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const data = Array.from({length: 20}, () => Math.floor(Math.random() * 100))
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: Array.from({length: 20}, (_, i) => i + 1),
      show: false
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [{
      name: 'CPU使用率',
      type: 'line',
      data: data,
      smooth: true,
      symbol: 'none',
      lineStyle: {
        color: '#667eea',
        width: 3
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(102, 126, 234, 0.6)' },
          { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
        ])
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.cpuChart = myChart
}

// 初始化内存监控图
const initMemoryChart = () => {
  const chartDom = chartRefs.value.memoryChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const data = Array.from({length: 20}, () => Math.floor(Math.random() * 100))
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#f5576c',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: Array.from({length: 20}, (_, i) => i + 1),
      show: false
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [{
      name: '内存使用率',
      type: 'line',
      data: data,
      smooth: true,
      symbol: 'none',
      lineStyle: {
        color: '#f5576c',
        width: 3
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(245, 87, 108, 0.6)' },
          { offset: 1, color: 'rgba(245, 87, 108, 0.1)' }
        ])
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.memoryChart = myChart
}

// 初始化网络流量图
const initNetworkFlowChart = () => {
  const chartDom = chartRefs.value.networkFlowChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const times = Array.from({length: 24}, (_, i) => `${i}:00`)
  const uploadData = Array.from({length: 24}, () => Math.floor(Math.random() * 1000))
  const downloadData = Array.from({length: 24}, () => Math.floor(Math.random() * 2000))
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['上传', '下载'],
      top: 10
    },
    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
    xAxis: {
      type: 'category',
      data: times
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} MB/s'
      }
    },
    series: [
      {
        name: '上传',
        type: 'line',
        data: uploadData,
        smooth: true,
        lineStyle: {
          color: '#667eea',
          width: 3
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(102, 126, 234, 0.4)' },
            { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
          ])
        }
      },
      {
        name: '下载',
        type: 'line',
        data: downloadData,
        smooth: true,
        lineStyle: {
          color: '#f5576c',
          width: 3
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(245, 87, 108, 0.4)' },
            { offset: 1, color: 'rgba(245, 87, 108, 0.1)' }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
  chartInstances.value.networkFlowChart = myChart
}

// 初始化可缩放时间轴图表
const initZoomChart = () => {
  const chartDom = chartRefs.value.zoomChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const baseDate = new Date(2024, 0, 1)
  const data = Array.from({length: 365}, (_, i) => {
    const date = new Date(baseDate.getTime() + i * 24 * 60 * 60 * 1000)
    return [
      date.toISOString().split('T')[0],
      (Math.sin(i * 0.1) + 1) * 50 + Math.random() * 20
    ]
  })
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 80,
        end: 100
      },
      {
        start: 80,
        end: 100,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23.1h6.6V24.4z M13.3,19.6H6.7v-1.2h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#667eea',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }
    ],
    grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
    xAxis: {
      type: 'time'
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '股价',
      type: 'line',
      data: data,
      symbol: 'none',
      sampling: 'lttb',
      lineStyle: {
        color: '#667eea',
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(102, 126, 234, 0.3)' },
          { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
        ])
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.zoomChart = myChart
}

// 初始化钻取图表
const initDrilldownChart = () => {
  const chartDom = chartRefs.value.drilldownChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    series: [{
      name: '销售额',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 1048, name: '华东区', itemStyle: { color: '#667eea' } },
        { value: 735, name: '华南区', itemStyle: { color: '#764ba2' } },
        { value: 580, name: '华北区', itemStyle: { color: '#f093fb' } },
        { value: 484, name: '西南区', itemStyle: { color: '#f5576c' } },
        { value: 300, name: '西北区', itemStyle: { color: '#4facfe' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.drilldownChart = myChart
}

// 初始化联动图表
const initLinkedChart = () => {
  const chartDom = chartRefs.value.linkedChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '详细数据',
      type: 'bar',
      data: [320, 302, 301, 334, 390, 330],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#667eea' },
          { offset: 1, color: '#764ba2' }
        ])
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.linkedChart = myChart
}

// 初始化自定义工具栏图表
const initCustomToolChart = () => {
  const chartDom = chartRefs.value.customToolChart
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#667eea',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    brush: {
      toolbox: ['rect', 'polygon', 'clear'],
      xAxisIndex: 0
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: Array.from({length: 100}, (_, i) => i + 1)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '数据',
      type: 'line',
      data: Array.from({length: 100}, () => Math.floor(Math.random() * 1000)),
      symbol: 'none',
      lineStyle: {
        color: '#667eea',
        width: 2
      }
    }]
  }
  myChart.setOption(option)
  chartInstances.value.customToolChart = myChart
}

// 初始化仪表盘图表
const initGaugeCharts = () => {
  gauges.value.forEach(gauge => {
    const chartDom = gaugeRefs.value[gauge.id]
    if (!chartDom) return
    
    const myChart = echarts.init(chartDom)
    const option = {
      series: [{
        name: gauge.title,
        type: 'gauge',
        min: 0,
        max: gauge.max,
        splitNumber: 10,
        radius: '80%',
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.3, '#67C23A'],
              [0.7, '#E6A23C'],
              [1, '#F56C6C']
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        splitLine: {
          distance: -30,
          length: 30,
          lineStyle: {
            color: '#fff',
            width: 4
          }
        },
        axisLabel: {
          color: 'auto',
          distance: 40,
          fontSize: 12
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}' + gauge.unit,
          color: 'auto',
          fontSize: 16,
          offsetCenter: [0, '70%']
        },
        data: [{
          value: gauge.value,
          name: gauge.title
        }]
      }]
    }
    myChart.setOption(option)
    chartInstances.value[gauge.id] = myChart
  })
}
</script>

<style scoped>
.component-charts-page {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 32px;
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.header-left .page-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #fff 0%, #e3f2fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-left .page-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.component-nav {
  margin-bottom: 24px;
  position: sticky;
  top: 20px;
  z-index: 100;
}

.nav-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-items {
  display: flex;
  gap: 16px;
  padding: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
   padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #666;
  font-weight: 500;
}

.nav-item:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.charts-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.chart-section {
  scroll-margin-top: 120px;
}

.section-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.demo-block {
  margin-bottom: 32px;
}

.demo-block:last-child {
  margin-bottom: 0;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-items {
  display: flex;
  gap: 16px;
  padding: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
   padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #666;
  font-weight: 500;
}

.nav-item:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.charts-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.chart-section {
  scroll-margin-top: 120px;
}

.section-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.demo-block {
  margin-bottom: 32px;
}

.demo-block:last-child {
  margin-bottom: 0;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.demo-content {
  padding: 0;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.chart-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.chart-container.large-chart {
  height: 500px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.chart-desc {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.chart-wrapper {
  flex: 1;
  min-height: 300px;
}

.large-chart-wrapper {
  min-height: 400px;
}

.gauge-chart {
  min-height: 200px;
}

.realtime-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.current-value {
  font-weight: 700;
  color: #667eea;
  background: #f0f7ff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.flow-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .component-charts-page {
    padding: 12px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .nav-items {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .charts-section {
    gap: 24px;
  }
  
  .chart-container {
    height: 300px;
    padding: 16px;
  }
  
  .chart-container.large-chart {
    height: 350px;
  }
  
  .chart-wrapper {
    min-height: 200px;
  }
  
  .large-chart-wrapper {
    min-height: 250px;
  }
}

/* 深色模式适配 */
.component-charts-page.dark-mode {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: #60a5fa;
}

.component-charts-page.dark-mode .chart-container {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(96, 165, 250, 0.2);
  backdrop-filter: blur(10px);
}

.component-charts-page.dark-mode .section-title {
  color: #3b82f6;
}

.component-charts-page.dark-mode .section-desc {
  color: #93c5fd;
}

.component-charts-page.dark-mode .demo-title {
  color: #60a5fa;
  border-bottom-color: rgba(96, 165, 250, 0.3);
}

.component-charts-page.dark-mode .chart-header h4 {
  color: #60a5fa;
}

.component-charts-page.dark-mode .chart-desc {
  color: #93c5fd;
}

.component-charts-page.dark-mode .current-value {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.component-charts-page.dark-mode .chart-header {
  border-bottom-color: rgba(96, 165, 250, 0.2);
}

/* 深色模式动画效果 */
.component-charts-page.dark-mode .shimmer-effect {
  position: relative;
  overflow: hidden;
}

.component-charts-page.dark-mode .shimmer-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.component-charts-page.dark-mode .float-effect {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* 移除所有文字阴影效果 */
.component-charts-page.dark-mode *,
.component-charts-page.dark-mode .el-card *,
.component-charts-page.dark-mode .el-card__body *,
.component-charts-page.dark-mode .demo-title,
.component-charts-page.dark-mode .section-title,
.component-charts-page.dark-mode .section-desc {
  text-shadow: none !important;
}
</style>
